<template>
	<div class="tenantPersonal">
		<div class="tenantPersonal-head">
			<router-link to="/loginSet">
				<div class="tenantPersonal-setgo"><img class="tenantPersonal-setgoimg" src="../assets/img/set.png" /></div>
			</router-link>
			<div class="tenantPersonal-user">
				<div class="user-imgbox">
					<router-link to="/PerfectInfo">
						<img v-if="baseInfodata.imgUrl==''" class="user-img" src="../assets/img/images/oinfouser_03.png" />
						<img v-else class="user-img" :src="baseInfodata.imgUrl" />
					</router-link>
				</div>
				<p class="user-name">{{baseInfodata.nick}}</p>
				<span class="user-member" @click="setOpenApp('https://m.zhudd.com/activities/vip/index.html')">普通会员</span>
			</div>
		</div>

		<div class="tenantPersonal-content">

			<div class="tenantPersonal-item">
				<router-link to="/TpCoupon">
					<div class="item-imgbox">
						<img class="item-img" src="../assets/img/images/parnel-icon_1.png" />
					</div>
					<p>优惠券</p>
					<span>{{baseInfodata.couponNum}}张</span>
				</router-link>
			</div>
			<div class="tenantPersonal-item" @click="setOpenApp('https://m.zhudd.com/activities/share/index.html')">
				<div class="item-imgbox">
					<img class="item-img" src="../assets/img/images/parnel-icon_2.png" />
				</div>
				<p>分享优惠</p>
				<span>多邀多得</span>
			</div>
			<div class="tenantPersonal-item" @click="GOTpRnaZ(baseInfodata.isCertification)">
				<div class="item-imgbox">
					<img class="item-img" src="../assets/img/images/parnel-icon_3.png" />
				</div>
				<p>实名认证</p>
				<span v-if="baseInfodata.isCertification==0">未认证</span>
				<span v-if="baseInfodata.isCertification==1">认证中</span>
				<span v-if="baseInfodata.isCertification==2">已认证</span>
				<span v-if="baseInfodata.isCertification==3">认证失败</span>
			</div>
			<!--<div class="tenantPersonal-item" @click="setOpenApp('https://m.zhudd.com/activities/zhima/index.html')">
				<div class="item-imgbox">
					<img class="item-img" src="../assets/img/images/parnel-icon_4.png" />
				</div>
				<p>芝麻信用</p>
				<span>未授权</span>
			</div>-->
			<div class="tenantPersonal-item">
				<router-link to="/TpReview">
					<div class="item-imgbox">
						<img class="item-img" src="../assets/img/images/parnel-icon_5.png" />
					</div>
					<p>我的评论</p>
					<span>入住后可发表</span>
				</router-link>
			</div>
			<div class="tenantPersonal-item">
				<router-link to="/TpUserNum">

					<div class="item-imgbox">
						<img class="item-img" src="../assets/img/images/parnel-icon_6.png" />
					</div>
					<p>常用入住人</p>
					<span v-if="baseInfodata.userNum==0">暂无入住人</span>
					<span v-else>{{baseInfodata.userNum}}人</span>
				</router-link>
			</div>
			<div class="tenantPersonal-item">
				<div class="item-imgbox">
					<img class="item-img" src="../assets/img/images/parnel-icon_7.png" />
				</div>
				<p>积分</p>
				<span v-if="baseInfodata.integral!=0">{{baseInfodata.integral}}分</span>
				<span v-if="baseInfodata.integral==0">暂无积分</span>
			</div>
			<div class="tenantPersonal-item" @click="setOpenApp('http://www.zhudd.com/mobile/user_guide')">
				<div class="item-imgbox">
					<img class="item-img" src="../assets/img/images/parnel-icon_8.png" />
				</div>
				<p>房客指南</p>
				<span>了解更多</span>
			</div>
			<div class="tenantPersonal-item">
				<router-link to="/tpbrowse">
					<div class="item-imgbox">
						<img class="item-img" src="../assets/img/images/parnel-icon_9.png" />
					</div>
					<p>浏览记录</p>
					<span>您看过的</span>
				</router-link>
			</div>

			<div class="tenantPersonal-item">
				<router-link to="/tpopinion">
					<div class="item-imgbox">
						<img class="item-img" src="../assets/img/images/parnel-icon_10.png" />
					</div>
					<p>意见反馈</p>
					<span>提出宝贵意见</span>
				</router-link>
			</div>

			<div class="tenantPersonal-item" @click="comalert">
				<div class="item-imgbox">
					<img class="item-img" src="../assets/img/images/parnel-icon_11.png" />
				</div>
				<p>联系客服</p>
				<span>9:00~22:00</span>
			</div>
		</div>
		<!--<router-link to="/landlordPersonal">
			<div class="tenantPersonal-switch">
				<img class="tenantPersonal-switchicon" src="../assets/img/qh.png" />
				<span>我要成为房东</span>
			</div>
		</router-link>-->
	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	export default {
		name: "tenantPersonal",
		data() {
			return {
				getHiss: JSON.parse(sessionStorage.getItem("userinfo")),
			}
		},
		mounted() {
			var that = this;
			if(that.getHiss == null) {
				that.$router.push({
					path: "/login",
				})
				return
			}
			that.userId = that.userinfo.id;
			that.token = that.userinfo.token;
			that.baseInfo();

		},

		computed: {
			...mapGetters([
				'source',
				'userinfo',
				'userstatus',
				'baseInfodata'
			])
		},
		methods: {
			...mapActions({
				setOpenApp: 'setOpenApp',
				setBaseInfo: 'setBaseInfo'
			}),
			GOTpRnaZ(isCertification) {
				this.$router.push({
					path: "/TpRnaZ",
					query: {
						isCertification: isCertification,
					}
				})
			},
			baseInfo() {
				let getHiss = JSON.parse(sessionStorage.getItem("userinfo"))
				var ajaxSign = {
					"userId": getHiss.id.toString(),
					"token": getHiss.token,
					"source": this.source,
				};
				let ajaxData = api.getAES(ajaxSign);
				api.GetBaseInfo(ajaxData)
					.then(res => {
						if(res.sta == 203) {
							this.$router.push({
								path: "/login"
							})
						}
					})
				this.setBaseInfo();
			},
			comalert() {
				let that = this;
				that.$dialog.confirm({
					title: '联系客服',
					mes: "023-88256950",
					opts: () => {
						window.location = "tel:023-88256950"
					}
				});
			}
		}
	}
</script>

<style>
	@import url("../assets/css/orderalert.css");
	.tenantPersonal {
		width: 100%;
		background: #f1f1f1;
		/*padding-bottom: .21rem;*/
		box-sizing: border-box;
	}
	
	.tenantPersonal .tenantPersonal-head {
		width: 100%;
		height: 3rem;
		background: #ee4648;
	}
	
	.tenantPersonal .tenantPersonal-setgo {
		width: 100%;
		height: .69rem;
		text-align: right;
		padding: .24rem .24rem .12rem 0;
		box-sizing: border-box;
	}
	
	.tenantPersonal .tenantPersonal-setgoimg {
		display: inline-block;
		width: .42rem;
		height: .42rem;
	}
	
	.tenantPersonal .tenantPersonal-user {
		width: 100%;
		text-align: center;
	}
	
	.tenantPersonal .user-imgbox {
		width: .83rem;
		height: .83rem;
		margin: auto;
	}
	
	.tenantPersonal .user-img {
		display: inline-block;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.tenantPersonal .user-name {
		color: #fff;
		font-size: .42rem;
		line-height: .42rem;
		margin-top: .24rem;
	}
	
	.tenantPersonal .user-member {
		display: inline-block;
		color: #323232;
		font-size: .28rem;
		line-height: .42rem;
		background: #ffe17a;
		padding: 0 .48rem 0 .28rem;
		box-sizing: border-box;
		border-radius: .2rem;
		position: relative;
		margin-top: .24rem;
	}
	
	.tenantPersonal .user-member::after {
		content: "";
		width: .17rem;
		height: .17rem;
		border: 1px solid #323232;
		border-left: none;
		border-bottom: none;
		position: absolute;
		top: .12rem;
		right: .28rem;
		transform: rotate(45deg);
	}
	
	.tenantPersonal .tenantPersonal-content {
		width: 100%;
		display: flex;
		-webkit-flex-wrap: wrap;
		background: #fff;
		padding-bottom: .56rem;
		box-sizing: border-box;
	}
	
	.tenantPersonal .tenantPersonal-item {
		width: 33.33333%;
		text-align: center;
		margin-top: .83rem;
	}
	
	.tenantPersonal .item-imgbox {
		width: .44rem;
		height: .44rem;
		margin: auto;
	}
	
	.tenantPersonal .item-img {
		display: block;
		max-width: 100%;
		min-height: 100%;
	}
	
	.tenantPersonal .tenantPersonal-item p {
		font-size: .31rem;
		color: #282828;
	}
	
	.tenantPersonal .tenantPersonal-item span {
		display: block;
		font-size: .25rem;
		color: #a4a4a4;
	}
	
	.tenantPersonal .tenantPersonal-switch {
		width: 100%;
		height: .9rem;
		background: #fff;
		margin-top: .21rem;
		font-size: .28rem;
		color: #282828;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.tenantPersonal .tenantPersonal-switchicon {
		display: block;
		width: .38rem;
	}
</style>